<template>
  <div class="home-container">
    <topnav :userinfo="userinfo"></topnav>
    <div class="main-container">
      <div class="top">
        <img src="@/assets/images/taobao.gif" alt="" />
        <div class="step-container">
          <el-steps :space="200" :active="0" finish-status="success">
            <el-step title="查看购物车"></el-step>
            <el-step title="拍下商品"></el-step>
            <el-step title="付款到支付宝"></el-step>
            <el-step title="确认收货"></el-step>
            <el-step title="评价"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="address-box">
        <h3>选择收货地址</h3>
        <ul class="address-container">
          <li class="address-item" v-for="(item,index) in addressList " :key="index" :class="item.default === true?'active':''" @click="handleAddress(index)">
            <div class="address-hd">{{item.province}}{{item.city}} {{item.receiver}}({{item.phone}})</div>
            <div class="address-bd">
              {{item.detailAddress}}
            </div>
            <div class="address-bd btn-modify" v-if="item.default === true" >修改</div>
            <div class="checkedMarker" v-if="item.default === true"></div>
          </li>
        </ul>
        <div class="address-btn">
          <div>显示全部地址</div>
          <div>管理收货地址</div>
        </div>
      </div>
      <div class="order-box">
        <h3>确认订单信息</h3>
        <div class="header-wrap">
          <div class="headerItem header-0">店铺宝贝</div>
          <div class="headerItem header-1">商品属性</div>
          <div class="headerItem header-2">单价</div>
          <div class="headerItem header-2">数量</div>
          <div class="headerItem header-2">优惠方式</div>
          <div class="headerItem header-2">小计</div>
        </div>
        <div class="order-container">
          <div class="order-item" v-for="(item,index) in itemInfo" :key="index">
            <div class="order-shop">
              <img
                src="//gw.alicdn.com/tfs/TB1CzD7SXXXXXXJaXXXXXXXXXXX-32-32.png"
                alt=""
                class="shopIcon"
              />
              <span>店铺：{{item.shopName}}</span>
            </div>
            <ul class="order-detail" v-for="(i2,idx) in item.itemList" :key="idx">
              <li class="detail-0">
                <img :src="`http://127.0.0.1:3007/${i2.imgSrc}`" alt="" />
                <div class="detail-title">
                  {{i2.title}}
                </div>
              </li>
              <li class="detail-1">
                <div class="t">
                  {{i2.type}}
                </div>
                <div class="b">{{i2.model}}</div>
              </li>
              <li class="detail-2">
                <span>{{i2.nowPrice}}</span>
              </li>
              <li class="detail-2">
                <span>{{i2.number}}</span>
              </li>
              <li class="detail-2">
                <span>爆款促销</span>
              </li>
              <li class="detail-2">
                <span class="itemsumup">{{i2.sum}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="realpay">
        <div class="paybox">
          <div class="line">
            <span class="title">实付款:</span>
            <span class="unit">￥</span>
            <span class="money">{{order_sumup}}</span>
          </div>
          <div class="line">
            <span class="title">寄送至：</span>
            <span class="address"
              >上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海</span
            >
          </div>
          <div class="line">
            <span class="title">收货人；</span>
            <span class="address">XXXXXX XXXXXX</span>
          </div>
        </div>
      </div>
      <div class="submit-btn">
        <el-button type="text" @click="back2Cart">返回购物车</el-button>
        <el-button type="error" class="submit-order" @click="handleSubmit">提交订单</el-button>
      </div>
    </div>
    <mainfooter></mainfooter>
  </div>
</template>
<script>
import topnav from '@/components/topnav.vue'
import mainfooter from '@/components/footer.vue'
export default {
  components: {
    topnav,
    mainfooter
  },

  data () {
    return {
      userinfo: {},
      addressList: [
        {
          province: '上海',
          city: '上海',
          receiver: 'XXX',
          detailAddress: '上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海',
          phone: 'XXXXXX',
          default: true
        },
        {
          province: '上海',
          city: '上海',
          receiver: 'XXX',
          detailAddress: '上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海',
          phone: 'XXXXXX',
          default: false
        },
        {
          province: '上海',
          city: '上海',
          receiver: 'XXX',
          detailAddress: '上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海上海',
          phone: 'XXXXXX',
          default: false
        }
      ],
      orderInfo: [],
      itemInfo: []
    }
  },
  created () {
    this.userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
    this.orderInfo = JSON.parse(this.$route.query.info)
    this.handleOrderItem()
    this.getUserInfo()
  },
  computed: {

    order_sumup: function () {
      let count = 0
      this.orderInfo.forEach((item) => {
        count += item.sum
      })
      return count
    }
  },
  methods: {
    async getUserInfo () {
      const { data: res } = await this.$http.get('/user/getUserInfo')
      if (res.code !== 200) return this.$message.error('获取用户信息失败！')
      this.userinfo = res.data
    },
    back2Cart () {
      this.$router.push('/shopcart')
    },
    handleAddress (index) {
      this.addressList.forEach((item) => {
        item.default = false
      })
      this.addressList[index].default = true
    },
    handleOrderItem () {
      for (let i = 0; i < this.orderInfo.length; i++) {
        const temp = {}
        temp.shopName = this.orderInfo[i].shopName
        temp.itemList = []
        const index = this.itemInfo.findIndex(item => item.shopName === temp.shopName)
        if (index === -1) {
          temp.itemList.push(this.orderInfo[i])
          this.itemInfo.push(temp)
        } else {
          this.itemInfo[index].itemList.push(this.orderInfo[i])
        }
      }
      console.log(this.itemInfo)
    },
    async handleSubmit () {
      const { data: res } = await this.$http.post('/order/createOrder', { info: this.orderInfo, userId: this.userinfo.id })
      if (res.code !== 200) return this.$message.error(res.msg)
      this.$message.success('提交成功！')
      setTimeout(() => {
        this.$router.push('/shopcart')
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
  width: 100%;
  background: #fff;
  .main-container {
    width: 1200px;
    margin: 0 auto;
    // height: 100%;
    // border: 1px solid red;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .step-container {
        min-width: 600px;
      }
    }
    .address-box {
      margin-bottom: 20px;
      .address-container {
        margin-top: 10px;
        display: flex;
        li:not(:last-child) {
          margin-right: 20px;
        }
      }
      .address-item {
        z-index: 2;
        position: relative;
        padding: 11px 15px;
        width: 237px;
        background: url(//img.alicdn.com/tps/i2/T1VPiBXvpeXXbjLKQ7-237-106.png)
          no-repeat;
        background-size: 100% 100%;
        font-size: 12px;
        cursor: pointer;
        &:hover {
          background: url(https://img.alicdn.com/tfs/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png)
            no-repeat;
        }
        .address-hd {
          width: 100%;
          border-bottom: 1px solid #f2f2f2;
          padding: 0 0 5px;
          margin-bottom: 5px;
          line-height: 18px;
          font-weight: 700;
        }
        .address-bd {
          //   height: 36px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .btn-modify {
          margin-top: 10px;
          color: #c97;
          cursor: pointer;
        }
        .checkedMarker {
          z-index: 3;
          position: absolute;
          background: url(//img.alicdn.com/tfs/TB1zLJRRpXXXXcrXXXXXXXXXXXX-30-600.png)
            no-repeat;
          background-position-x: 0%;
          background-position-y: 0%;
          background-position: 0 -272px;
          width: 28px;
          height: 28px;
          top: 77px;
          right: 1px;
        }
      }
      .active {
        background: url(https://img.alicdn.com/tfs/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png)
          no-repeat;
      }
      .address-btn {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        > div {
          color: #c97;
          cursor: pointer;
          &:hover {
            color: #f40;
          }
        }
      }
    }
    .order-box {
      .header-wrap {
        margin-top: 15px;
        display: flex;
        .headerItem {
          display: inline-block;
          height: 24px;
          line-height: 24px;
          text-align: center;
          border-bottom: 3px solid #b2d1ff;
          font-size: 12px;
          margin-left: 1px;
          vertical-align: bottom;
          color: rgba(0, 0, 0, 0.85);
        }
        .header-0 {
          width: 30%;
        }
        .header-1 {
          width: 20%;
        }
        .header-2 {
          width: 12.5%;
        }
      }
      .order-container {
        padding-top: 20px;
        .order-item {
          .order-shop {
            .shopIcon {
              width: 16px;
              height: 16px;
              vertical-align: text-bottom;
              margin-right: 6px;
              position: relative;
              top: 1px;
            }
          }
          .order-detail {
            padding: 20px;
            margin-top: 10px;
            display: flex;
            background-color: rgb(251, 252, 255);
            border-top: 1px dotted #80b2ff;
            border-bottom: 1px dotted rgb(221, 221, 221);
            .detail-0 {
              width: 29%;
              display: flex;
              .detail-title {
                margin-left: 20px;
                font-size: 12px;
                line-height: 20px;
                cursor: pointer;
                &:hover {
                  color: #f40;
                }
              }
            }
            .detail-1 {
              width: 20%;
              color: rgba(0, 0, 0, 0.65);
              font-size: 12px;
              line-height: 20px;
            }
            .detail-2 {
              width: 12.5%;
              text-align: center;
              font-size: 12px;
              .itemsumup {
                color: rgb(255, 0, 54);
                font-size: 16px;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
    .realpay {
      margin-top: 15px;
      display: flex;
      justify-content: flex-end;
      .paybox {
        padding: 20px 5px;
        text-align: right;
        min-width: 230px;
        border: 1px solid #ff0036;
        .line {
          font-size: 14px;
          span {
            vertical-align: baseline;
          }
          .title {
            font-weight: 700;
          }
          .unit {
            font-size: 26px;
            color: #999;
          }
          .money {
            font-size: 26px;
            font-weight: bold;
            color: rgb(255, 0, 54);
          }
          .address {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .line:first-child {
          margin-bottom: 20px;
        }
      }
    }
    .submit-btn {
        display: flex;
      justify-content: flex-end;
      .submit-order {
        color: #fff;
        background: #ff0036;
        width: 182px;
        height: 39px;
        font-weight: bold;
      }
    }
  }
}
</style>
<style lang="less">
.el-step__title.is-success {
  color: #000;
  font-weight: 700;
}
.el-step__head.is-success {
  border-color: #ff0036;
  color: #ff0036;
}
.el-step__icon {
  height: 34px;
  width: 34px;
}
.el-step.is-horizontal .el-step__line {
  top: 18px;
}
</style>
